/*
* @Date: 2020/4/28
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/

import React from 'react';
import { CaretRightOutlined, CaretDownOutlined, FolderOutlined, FilePptOutlined } from '@ant-design/icons'
import './index.scss';
import NewComponent from '../Modal/NewComponent';
import Ele from '../../ele';
const { remote } = window.require('electron')
const { Menu, MenuItem } = remote
class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showDetail: false,
    };
  }

  onContextMenu = (e) => {
    e.preventDefault();
    const menu = new Menu();
    menu.append(new MenuItem({label: '新建组件', click() {}}));
    menu.popup({ window: remote.getCurrentWindow()});
  }

  render() {
    const { showDetail } = this.state;
    const { components = [] } = this.props;
    return (
      <div className="component-dir-wrapper">
        <div className="component-dir-name" onContextMenu={this.onContextMenu}>
          {
            components.length > 0 && (
              showDetail
                ? <CaretDownOutlined onClick={() => this.setState({showDetail: false})}/>
                : <CaretRightOutlined onClick={() => this.setState({showDetail: true})} />
                )
          }
          <FolderOutlined/>
          <span className="component-dir-name">components</span>
        </div>
        {
          showDetail && (
            <div className="component-dir-content">
              {
                components.map((item) => {

                })
              }
            </div>
          )
        }

      </div>
    )
  }
}

class PageItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showDetail: false,
    };
  }

  onContextMenu = (e) => {
    e.preventDefault();
    const { onNewComponent } = this.props;
    const { path } = e.currentTarget.dataset;
    Ele.switchPath(path);
    const menu = new Menu();
    menu.append(new MenuItem({
      label: '新建组件',
      click() {
        onNewComponent && onNewComponent(path);
      }
    }));
    menu.popup({ window: remote.getCurrentWindow()});
  }

  render() {
    const { name, components, mapDist, curPath, path } = this.props;
    const { showDetail } = this.state;
    return (
      <div className="page-dir-content-item">
        <div
          className={
            `page-dir-content-item-name ${curPath === `${path}/${name}` ? 'directory-checked' : ''}`
          }
          data-path={`${path}/${name}`}
          onContextMenu={this.onContextMenu}
        >
          {
            showDetail
              ? <CaretDownOutlined onClick={() => this.setState({showDetail: false})}/>
              : <CaretRightOutlined onClick={() => this.setState({showDetail: true})} />
          }
          <FolderOutlined/>
          <span>{name}</span>
        </div>
        {
          showDetail && (
            <div className="page-dir-content-item-components">
              <div
                className={
                  `page-dir-content-item-components-item ${curPath === `${path}/${name}` ? 'directory-checked' : ''}`
                }
                data-path={`${path}/${name}/index`}
              >
                <FilePptOutlined />
                <span>index</span>
              </div>
              {
                components.map((item) => {
                  return (
                    <div className="page-dir-content-item-components-item">

                    </div>
                  )
                })
              }
            </div>
          )
        }
      </div>
    )
  }
}

class Page extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showDetail: false,
    }
  }

  onContextMenu = (e) => {
    const { onNewPage } = this.props;
    const { path } = e.currentTarget.dataset;
    Ele.switchPath(path);
    e.preventDefault();
    const menu = new Menu();
    menu.append(
      new MenuItem({
        label: '新建页面',
        click() {
          onNewPage && onNewPage(path);
        }
      })
    );
    menu.append(new MenuItem({label: '新建组件', click() {}}));
    menu.popup({ window: remote.getCurrentWindow()});
  }

  render() {
    const { pages = [] } = this.props;
    const { showDetail, curPath } = this.state;
    console.log(pages);
    return (
      <div className="page-dir-wrapper">
        <div
          className={`page-dir-name ${curPath === '/pages' ? 'directory-checked' : ''}`}
          onContextMenu={this.onContextMenu}
          data-path='/pages'
        >
          {
            pages.length > 0 && (
              showDetail
                ? <CaretDownOutlined onClick={() => this.setState({showDetail: false})}/>
                : <CaretRightOutlined onClick={() => this.setState({showDetail: true})} />
            )
          }
          <FolderOutlined/>
          <span className="page-dir-name">pages</span>
        </div>
        {
          showDetail && (
            <div className="page-dir-content">
              {
                pages.map((item) => {
                  return (
                    <PageItem
                      {...item}
                      curPath={curPath}
                      path='/pages'
                      onNewComponent={this.props.onNewComponent}
                    />
                    )

                })
              }
            </div>
          )
        }

      </div>
    );
  }
}

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showProject: false,
      showNewComponent: false,
      type: 'P',
      curPath: '/',
    };
  }

  onNewPage = (path) => {
    this.setState({
      showNewComponent: true,
      type: 'P',
      curPath: path
    });
  }

  onNewComponent = (path) => {
    this.setState({
      showNewComponent: true,
      type: 'C',
      curPath: path
    });
  }

  onNewPageSuccess = (name) => {
    this.setState({
      showNewComponent: false,
    }, () => {
      XUE.win.emit('project-update', 'user');
    });
  }

  render() {
    const { project } = this.props;
    const { showProject, showNewComponent, type, curPath } = this.state;
    const { pages = [], components = [], name, dirPath } = project;

    return (
      <React.Fragment>
        <div className="project-directory-wrapper">
          <div className="project-directory-name">
            {
              showProject
                ? <CaretDownOutlined onClick={() => this.setState({showProject: false})} />
                : <CaretRightOutlined onClick={() => this.setState({showProject: true})} />
            }
            <FolderOutlined/>
            <span className="project-dir-name">{name}</span>
            &nbsp;&nbsp;
            <span className="project-dir-path">{dirPath}</span>
          </div>
          {
            showProject && (
              <div className="project-directory-content">
                <Component components={components} curPath={project.curPath} />
                <Page
                  pages={pages}
                  onNewPage={this.onNewPage}
                  curPath={project.curPath}
                  onNewComponent={this.onNewComponent}
                />
              </div>
            )
          }

        </div>
        {
          showNewComponent && (
            <NewComponent
              visible={showNewComponent}
              type={type}
              onNewPageSuccess={this.onNewPageSuccess}
              curPath={curPath}
            />
          )
        }

      </React.Fragment>

    )
  }
}
